<template>
	<view class="content">
		<view class="micro">
			<h2>微 专 业</h2>
			<h6>SPECIALIZATION</h6>
			<p>跟随知名企业的一线资深工程师、设计师，</p>
			<p>以及行业知名专家学习，</p>
			<p>系统的掌握工作方法和技巧，获得全面的职业升</p>
			<button type="primary" size="mini" @click="goto('/pages/about/about')">查看所有微专业 > </button>
		</view>
		<!-- 介绍 -->
		<view class="introduce">
			<view class="uni-flex">
				<view class="video1">
					<image src="../../static/img/micro/video1.png" mode=""></image>
					<p>深度学习工程师微专业</p>
				</view>
				<view class="video2">
					<image src="../../static/img/micro/video2.png" mode=""></image>
					<p>地产数据分析师</p>
				</view>
			</view>
		</view>

		<view class="tutor">
			<h4>微专业导师简介</h4>
			<uni-grid :column="2" :show-border="false" :square="false">
				<uni-grid-item class="wu">
					<image src="../../static/img/micro/mahuateng.jpg" mode=""></image>
					<text class="name">马化腾</text>
					<text class="jianjie">腾讯主要创办人之一</text>
					<text class="jianjie">董事会主席兼首席执行官</text>
				</uni-grid-item>
				<uni-grid-item>
					<image src="../../static/img/micro/zhangxiaolong.jpg" mode=""></image>
					<text class="name">张小龙</text>
					<text class="jianjie">微信事业群总裁</text>
					<text class="jianjie">腾讯集团高级执行副总裁</text>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="2" :show-border="false" :square="false">
				<uni-grid-item>
					<image src="../../static/img/micro/zhangzhidong.jpg" mode=""></image>
					<text class="name">张志东</text>
					<text class="jianjie">腾讯终身荣誉顾问</text>
					<text class="jianjie">腾讯学院荣誉院长</text>
				</uni-grid-item>
				<uni-grid-item>
					<image src="../../static/img/micro/chenyidan.jpg" mode=""></image>
					<text class="name">陈一丹</text>
					<text class="jianjie">终身荣誉顾问</text>
					<text class="jianjie">腾讯主要创办人之一</text>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="2" :show-border="false" :square="false">
				<uni-grid-item>
					<image src="../../static/img/micro/lushan.jpg" mode=""></image>
					<text class="name">卢山</text>
					<text class="jianjie">集团高级执行副总裁</text>
					<text class="jianjie">技术工程事业群总裁</text>
				</uni-grid-item>
				<uni-grid-item>
					<image src="../../static/img/micro/tangdaosheng.jpg" mode=""></image>
					<text class="name">汤道生</text>
					<text class="jianjie">集团高级执行副总裁</text>
					<text class="jianjie">云与智慧产业事业群总裁</text>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="profession">
			<h4> 选择自己喜欢的职业</h4>
			<uni-grid :column="3" :showBorder="false" :highlight="false">
				<uni-grid-item>
					<custom-icons type="sheji" size="30" style="color: #ffffff;" class="input-uni-icon"></custom-icons>
					<text class="text">产品设计</text>
				</uni-grid-item>
				<uni-grid-item>
					<custom-icons type="kaifa" size="30" style="color: #ffffff;" class="input-uni-icon"></custom-icons>
					<text class="text">前台开发</text>
				</uni-grid-item>
				<uni-grid-item>
					<custom-icons type="houtai" size="30" style="color: #ffffff;" class="input-uni-icon"></custom-icons>
					<text class="text">后台开发</text>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="3" :showBorder="false" :highlight="false">
				<uni-grid-item>
					<custom-icons type="jishutong" size="30" style="color: #ffffff;" class="input-uni-icon"></custom-icons>
					<text class="text">技术支撑</text>
				</uni-grid-item>
				<uni-grid-item>
					<custom-icons type="yishu" size="30" style="color: #ffffff;" class="input-uni-icon"></custom-icons>
					<text class="text">艺术</text>
				</uni-grid-item>
				<uni-grid-item>
					<custom-icons type="qita" size="30" style="color: #ffffff;" class="input-uni-icon"></custom-icons>
					<text class="text">其他</text>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	export default {
		data() {
			return {

			}
		},
		components: {
			uniGrid,
			uniGridItem,
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f2f4f8;
	}

	.micro {
		color: white;
		text-align: center;

		h2 {
			margin-bottom: -100rpx;
		}

		.micro>p {
			font-size: 13px;
			margin-top: -130rpx;
			margin-bottom: -30rpx;
		}

		width: 100%;
		height: 550rpx;
		background:url(../../static/img/micro/micro.jpg) no-repeat;
		background-size: 100%;
		line-height: 84px;
		z-index: 999;
	}

	.introduce {
		margin-left: 17rpx;
		font-size: 12px;
		color: #505050;
		margin-bottom: 20px;

		.uni-flex {
			display: flex;

			image {
				width: 95%;
				height: 200rpx;
			}

			view {
				width: 50%;
			}
		}

	}

	.tutor {
		color: #676967;

		.name {
			color: #383838;
		}
		.jianjie{
			font-size: 12px;
		}

		background-color: #ffffff;
		text-align: center;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 90rpx;
			margin-left: 100rpx;
			margin-top: 30rpx;
		}
		
		h4{
			padding-top: 30rpx;
			padding-bottom:40rpx ;
		}
	}

	.profession {
		background-color: #3685c6;
		color: white;
		text-align: center;
		margin-top: 10rpx;

		h4 {
			padding: 50rpx;
			margin-bottom: 60rpx;
		}
	}
</style>
